<template>
  <div class="popup">

    
    <mt-popup v-model="popup" position="right">
      <mt-header   :title="source" >
        <router-link slot="left" :to="{ name: `${this.back}` }">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
        <div class="main">
             <slot></slot>
        </div>
     

    </mt-popup>
  </div>
</template>
<script>
export default {
  name: "popup",
  props: {
    popupVisible: {
      type: Boolean,
      required: true,
    },

    back: String,
    source: String
  },
  data(){
    return{
      popup: this.popupVisible,
      title:''
    }
  }
};
</script>
<style>
.popup .main {
    
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.popup .mint-popup {
  width: 100%;
  height: 100%;
}
.popup .mint-header {
  position: fixed;
  width: 100%;
  z-index: 99999;
  background-color: #007d65;
}

</style>